<template>
  <div class="left-content">
    <!-- 将左侧区域分为三个部分 -->
    <div class="left-item">
      <LeftTop/>
    </div>
    <div class="left-item">
      <LeftCenter />
    </div>
    <div class="left-item">
      <LeftBottom />
    </div>
  </div>
</template>

<script>
import LeftTop from '@/views/left/LeftTop.vue'
import LeftCenter from '@/views/left/LeftCenter.vue';
import LeftBottom from '@/views/left/LeftBottom.vue'

export default {
  name: 'Left',
  components: {
    LeftCenter,
    LeftTop,
    LeftBottom
  }
}
</script>

<style scoped>
.left-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.left-item {
  flex: 1;
  width: 100%;
  height: 33.33%;
  padding: 0;
  margin: 0;
}

.left-top, .left-bottom {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.left-center {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
</style>